<template>
  <div>
    <h2>笛卡尔积结果：</h2>
    <ul>
      <li v-for="(combo, index) in cartesianResult" :key="index">
        {{ combo }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array3D: [
        [
          [1, 2],
          [3, 4]
        ],
        [
          ['A', 'B'],
          ['C', 'D']
        ],
        [
          ['x', 'y'],
          ['z']
        ]
      ],
      cartesianResult: []
    };
  },
  methods: {
    cartesianProduct(arrays) {
      return arrays.reduce((acc, curr) => {
        return acc.flatMap(prev => curr.map(item => [...prev, item]));
      }, [[]]);
    },
    flattenAndCartesianProduct(array3D) {
      // 将三维数组中的二维数组转化为笛卡尔积
      const flattenedArrays = array3D.map(twoDArray => this.cartesianProduct(twoDArray));
      return this.cartesianProduct(flattenedArrays);
    }
  },
  mounted() {
    // 计算笛卡尔积
    this.cartesianResult = this.flattenAndCartesianProduct(this.array3D);
  }
};
</script>